<script setup>
const props = defineProps({
  items:{
    type:Array,
    required:true,
    default:()=>{
      return []
    }
  },
 search:{
    name:'',
    age:'',
    sex:'',
 }
})
const emit = defineEmits(['query','reset','add'])
const data = props.search
console.log(data)
const querySearch =(query, cb) => {
  const result = query ? props.items.filter((item) =>
          item.value.toLowerCase().includes(query.toLowerCase()))
      : props.items;
  console.log(result)
  cb(result);
}
</script>

<template>
  <div>
    <el-form>
      <el-row>
        <el-col :span="6">
          <el-form-item class="searchBox"  >
            <template #label>
              <slot name="search1">搜索</slot>
            </template>
            <el-autocomplete  :fetch-suggestions="querySearch"
                              placeholder="请输入内容" v-model="data.name">
            </el-autocomplete>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item class="searchBox">
            <template #label>
              <slot name="search2">年龄</slot>
            </template>
            <el-input placeholder="请输入内容" v-model="data.age" ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item class="searchBox">
            <template #label>
              <slot name="search3">性别</slot>
            </template>
            <el-input placeholder="请输入内容" v-model="data.sex"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">

          <el-button type="primary" @click="$emit('query')" >查询</el-button>
          <el-button type="success" @click="$emit('add')" >新增</el-button>
          <el-button @click="$emit('reset')" >重置</el-button>
        </el-col>
      </el-row>


    </el-form>
  </div>
</template>

<style scoped>
.searchBox{
  width: 15vw;
}

</style>